<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="出库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date placeholder="请选择出库时间"
                                v-decorator="['chukushijian',validatorRules.chukushijian]"
                                :trigger-change="true" :show-time="true"
                                date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24" >
              <a-form-item label="出库状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['chukuzhuangtai']" placeholder="请输入出库状态" ></a-input>
              </a-form-item>
            </a-col> -->
                    <a-col :span="24">
                        <a-form-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select v-decorator="['shenqingren',validatorRules.shenqingren]"
                                placeholder="请选择申请人">
                                <a-select-option v-for="item in RenyuanList" :value="item"
                                    :key="item">{{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24" >
              <a-form-item label="废弃量" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-decorator="['chukuliang']" placeholder="请输入废弃量" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="24" >
              <a-form-item label="拍照" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-image-upload isMultiple  v-decorator="['jiedian1paizhao']" ></j-image-upload>
              </a-form-item>
            </a-col>
            <a-col :span="24" >
              <a-form-item label="公司名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['gongsimingcheng']" placeholder="请输入公司名称" ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24" >
              <a-form-item label="到期时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['daoqishijian']" placeholder="请输入到期时间" ></a-input>
              </a-form-item>
            </a-col> -->
                </a-row>
            </a-form>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="废弃子表" :key="refKeys[0]" :forceRender="true">
                <j-editable-table :ref="refKeys[0]" :loading="yzdFeiqizibiaoTable.loading"
                    :columns="yzdFeiqizibiaoTable.columns"
                    :dataSource="yzdFeiqizibiaoTable.dataSource" :maxHeight="300"
                    :disabled="formDisabled" :rowNumber="true" :rowSelection="true"
                    :actionButton="true">
                    <template v-slot:action="props">
                        <div>
                            <a-select style="width: 195px" :default-value="props.value"
                                @change="(value)=> sethuaxuepinmingcheng(value,props)">
                                <a-select-option v-for="item in huaxuepinList" :value="item"
                                    :trigger-change="true" :key="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </template>

                    <template v-slot:action1="props">
                        <div>
                            <a-select style="width: 195px" :default-value="props.value"
                                @change="(value)=> setpicihao(value,props)">
                                <a-select-option v-for="item in picihaoList" :value="item"
                                    :trigger-change="true" :key="item">
                                    {{ item }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </template>

                </j-editable-table>
            </a-tab-pane>
        </a-tabs>
        <a-row v-if="showFlowSubmitButton"
            style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提
                交</a-button></a-row>
    </a-spin>
</template>
  
  <script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
    name: 'YzdChukushenqingguanliForm',
    mixins: [JEditableTableMixin],
    components: {
    },
    data() {
        return {
            RenyuanList: [],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            labelCol2: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol2: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 0,
            validatorRules: {
                chukushijian: {
                    rules: [
                        { required: true, message: '请选择出库时间!' },
                    ]
                },
                shenqingren: {
                    rules: [
                        { required: true, message: '请选择出库人!' },
                    ]
                },
            },
            refKeys: ['yzdFeiqizibiao',],
            tableKeys: ['yzdFeiqizibiao',],
            activeKey: 'yzdFeiqizibiao',
            // 废弃子表
            yzdFeiqizibiaoTable: {
                loading: false,
                dataSource: [],
                columns: [
                    {
                        title: '仓库名称',
                        key: 'cangkumingcheng',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        // disabled: true
                    },
                    {
                        title: '货物名称',
                        key: 'huaxuepinmingcheng',
                        type: FormTypes.slot,
                        slotName: 'action',
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        // disabled: true
                    },
                    // {
                    //   title: '批次号',
                    //   key: 'picihao',
                    //   type: FormTypes.slot,
                    //   slotName: 'action1',
                    //   width:"200px",
                    //   placeholder: '请输入${title}',
                    //   defaultValue:'',
                    //   // disabled: true
                    // },
                    {
                        title: '重量',
                        key: 'zhongliang',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        // disabled: false
                    },
                    // {
                    //   title: '预计重量',
                    //   key: 'yujizhongliang',
                    //   type: FormTypes.input,
                    //   width:"200px",
                    //   placeholder: '请输入${title}',
                    //   defaultValue:'',
                    // },
                    // {
                    //   title: '差异重量',
                    //   key: 'chayizhongliang',
                    //   type: FormTypes.input,
                    //   width:"200px",
                    //   placeholder: '请输入${title}',
                    //   defaultValue:'',
                    // },
                    // {
                    //   title: '父id',
                    //   key: 'pid',
                    //   type: FormTypes.input,
                    //   width:"200px",
                    //   placeholder: '请输入${title}',
                    //   defaultValue:'',
                    //   disabled
                    // },
                ]
            },
            url: {
                getpicihao: '/yzd_chukuguanli/yzdChukushenqingguanli/getByhuaxuepinming',
                huaxuepin: "/yzd_jichuxinxi/yzdWeixianfeiwuxinxi/list",
                add: "/yzd_chukuguanli/yzdChukushenqingguanli/add",
                edit: "/yzd_chukuguanli/yzdChukushenqingguanli/edit",
                queryById: "/yzd_chukuguanli/yzdChukushenqingguanli/queryById",
                yzdFeiqizibiao: {
                    list: '/yzd_chukuguanli/yzdChukushenqingguanli/queryYzdFeiqizibiaoByMainId'
                },
                renyuanurl: "/menjin/menjinrenyuan/list",
            },
            huaxuepinList: [],
            huaxuepinmingcheng: '',
            picihaoList: [],
        }
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => { },
            required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
        this.getHuaxuepin();
        this.getrenyuan();
    },
    methods: {
        getrenyuan() {
            getAction(this.url.renyuanurl).then(res => {
                console.log(res);
                res.result.records.forEach(element => {
                    this.RenyuanList.push(element.name);
                })
            })
        },
        setpicihao(arr, row) {
            this.huaxuepinmingcheng = arr,
                this.$refs.yzdFeiqizibiao.setValues([{
                    'rowKey': row.rowId, values: {
                        'picihao': arr
                    }
                }]);
        },

        sethuaxuepinmingcheng(arr, row) {
            this.$refs.yzdFeiqizibiao.setValues([{
                'rowKey': row.rowId, values: {
                    'huaxuepinmingcheng': arr
                }
            }]);

            var re = {
                'huaxuepinmingcheng': arr
            }
            getAction(this.url.getpicihao, re).then(res => {
                res.result.forEach(element => {
                    console.log(element);
                    this.picihaoList.push(element.picihao)
                })
            })
        },


        getHuaxuepin() {
            getAction(this.url.huaxuepin).then((res) => {
                res.result.records.forEach(element => {
                    this.huaxuepinList.push(element.huaxuepinmingcheng)
                })
            })
        },

        addBefore() {
            this.form.resetFields()
            this.yzdFeiqizibiaoTable.dataSource = []
        },
        getAllTable() {
            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
            let fieldval = pick(this.model, 'chukushijian', 'chukuzhuangtai', 'shenqingren', 'chukuliang', 'jiedian1paizhao', 'gongsimingcheng', 'daoqishijian')
            this.$nextTick(() => {
                this.form.setFieldsValue(fieldval)
            })
            // 加载子表数据
            if (this.model.id) {
                let params = { id: this.model.id }
                this.requestSubTableData(this.url.yzdFeiqizibiao.list, params, this.yzdFeiqizibiaoTable)
            }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
            let main = Object.assign(this.model, allValues.formValue)
            return {
                ...main, // 展开
                yzdFeiqizibiaoList: allValues.tablesValue[0].values,
            }
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result);
                    }
                })
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'chukushijian', 'chukuzhuangtai', 'shenqingren', 'chukuliang', 'jiedian1paizhao', 'gongsimingcheng', 'daoqishijian'))
        },

    }
}
  </script>
  
  <style scoped>
</style>